<template>
	<view class="order-manage">
		<view class="top-bar">
			<view class="detail">
				<view class="detail-top">
					<view style="font-size: 35rpx;padding-top: 40rpx;padding-left: 10rpx">核销码 MC 1234-5678-9012</view>
					<view style="margin-top: 15rpx;padding-left: 10rpx;">车辆：奔驰FWE4/豫A98FHJ</view>
					<view style="border-bottom: 1rpx red solid;margin-top: 20rpx;">
					</view>
				</view>
				<view class="detail-center">
					<view style="font-size: 35rpx;font-size: 40rpx;">服务内容</view>
					<view style="display: inline-flex;margin-bottom: 20rpx;margin-top: 20rpx">
						<view>车辆清洗</view>
						<view style="margin-left: 400rpx;">$100</view>
					</view>
					<view class="detail-center">
					</view>
					<view style="display: inline-flex;">
						<view>车辆清洗附加费</view>
						<view style="margin-left: 320rpx;">$10</view>
					</view>
				</view>
				<view style="border-bottom: 1rpx red solid;margin-top: 20rpx;">
				</view>
				<view class="detail-bottom">
					<view style="font-size: 35rpx;font-size: 40rpx;">订单信息</view>
					<view style="display: inline-flex;margin-top: 30rpx;margin-bottom: 10rpx;">
						<view>原价</view>
						<view style="margin-left: 380rpx;">{{orderdetail.price}}</view>
					</view>
					<view class="detail-center">
					</view>
					<view style="display: inline-flex;margin-top: 10rpx;margin-bottom: 10rpx;">
						<view>优惠</view>
						<view style="margin-left: 370rpx;">{{orderdetail.discount}}</view>
					</view>
					<view style="display: inline-flex;margin-top: 10rpx;margin-bottom: 10rpx;">
						<view>实付金额</view>
						<view style="margin-left: 320rpx;">{{orderdetail.finnalprice}}</view>
					</view>
					<view style="display: inline-flex;margin-top: 10rpx;margin-bottom: 10rpx;">
						<view>订单编号</view>
						<view style="margin-left: 320rpx;">{{orderdetail.ordernumber}}</view>
					</view>
					<view style="display: inline-flex;margin-top: 10rpx;margin-bottom: 10rpx;">
						<view>预约时间</view>
						<view style="margin-left: 220rpx;">{{orderdetail.appointmenttime}}</view>
					</view>
					<view style="display: inline-flex;margin-top:10rpx;margin-bottom: 10rpx;">
						<view>支付时间</view>
						<view style="margin-left: 220rpx;">{{orderdetail.paytime}}</view>
					</view>
					<view style="display: inline-flex;margin-top:10rpx;margin-bottom: 10rpx;">
						<view>核销时间</view>
						<view style="margin-left: 220rpx;">{{orderdetail.canceltime}}</view>
					</view>
				</view>
			</view>
			<view>
				<button class="detail-btn" @click="hexiao(item)" v-if="!ishexiao">确认核销</button>
				<button class="detail-btn1" v-if="ishexiao">已核销</button>
			</view>
		</view>
		    <view v-show="hexiaoshow" class="modal-container">
		      <view class="mask" @click="showShowModal = false"></view>
		      <view class="modal">
		        <view class="title">核销此订单</view>
		        <view class="content">
		          请您仔细核对订单，此操作不可撤销
		          请谨慎操作!
		        </view>
				<view style="display: inline-flex;gap: 240rpx;">
					<button @click="hexiaoshow = false;ishexiao=true" class="close-btn">确认</button>
		        <button @click="hexiaoshow = false" class="close-btn">关闭</button>
				</view>
				
		      </view>
		    </view>
	</view>
</template>

<script>
	import {
		get,
		post,
		put
	} from '../../utils/request.js'
	export default {
		data() {
			return {
				hexiaoshow:false,
				ishexiao:false,
				orderdetail:{
					cancellationnumber:"",
					carnumber:"",
					project:[{
						project:"车辆清洗",
						projectprice:"$100"
					},{
						project:"车辆清洗附加费",
						projectprice:"$10"
					}],
					price:"￥110",
					discount:"￥20",
					finnalprice:"$90.00",
					ordernumber:"1223233445",
					appointmenttime:"2023-03-18 19:00:00",
					paytime:"2023-03-18 19:00:00",
					canceltime:"2023-03-18 19:00:00"
					
				}
			};
		},
		methods: {
			hexiao(){
				this.hexiaoshow=true
				console.log(this.hexiaoshow)
			}
		}
	}
</script>

<style scoped>
	.order-manage {
		background-color: #f5f5f5;
		min-height: 100vh;
		/*  padding: 10px; */
	}

	/* 顶部搜索及筛选 */
	.top-bar {
		padding: 10px;
		background-color: #2979ff;
		height: 200rpx;
	}

	.detail {
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
		background-color: azure;
		height: 950rpx;
		border-radius: 4%;
	}

	.detail-top {
		margin-bottom: 30rpx;
	}

	.detail-bottom {
		margin-top: 30rpx;
	}
	.detail-btn{
		background-color: #2979ff;
		margin-top: 30rpx;
	}
	/* 弹窗容器 */
	.modal-container {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  z-index: 999;
	}
	
	/* 遮罩层 */
	.mask {
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: rgba(0, 0, 0, 0.5);
	}
	
	/* 弹窗内容 */
	.modal {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  width: 80%;
	  background-color: white;
	  border-radius: 16rpx;
	  padding: 30rpx;
	}
	
	.title {
	  font-size: 34rpx;
	  font-weight: bold;
	  margin-bottom: 20rpx;
	  text-align: center;
	}
	.content {
	  padding: 20rpx 0;
	  margin-bottom: 30rpx;
	  border-top: 1px solid #eee;
	  border-bottom: 1px solid #eee;
	  font-size: 40rpx;
	  align-self: center;
	}
	
	.close-btn {
	  width: 180rpx;
	  height: 90rpx;
	  padding: 15rpx;
	  background-color: #2979ff;
	  color: white;
	  border: none;
	  border-radius: 8rpx;
	    /* 弹性布局 */
	    display: flex;
	    /* 垂直居中 */
	    align-items: center;
	    /* 水平居中 */
	    justify-content: center;
	}
	.detail-btn1{
		background-color: gray;
	}
</style>